class HelloMessage extends React.Component{
    render() {
        return <div>{this.props.message}</div>;
    }
};

class TextBox extends React.Component{
    constructor(){
        super();
        this.state={
            isEditing: false
        };
    }
    update(){
        this.props.update(this.refs.messageTextBox.value);
        this.setState({
            isEditing: false
        })
    }
    edit(){
        console.log(this);
        this.setState({isEditing:true});
    }
    render(){
        return (
            <div>
                {this.props.label}<br/>
                <input type='text' ref='messageTextBox'
                       disabled={!this.state.isEditing}/>
                {
                    this.state.isEditing ?
                        <button onClick={this.update.bind(this)}>Update</button>
                        :
                        <button onClick={this.edit.bind(this)}>Edit</button>
                }
            </div>
        );
    }
}

class App extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            firstName: '',
            lastName:''
        };
    }

    update(key, value) {
        var newState = {};
        newState[key] = value;
        this.setState(newState);
    };

    render() {
        return (
            <div>
                <HelloMessage
                    message={'Hello ' + this.state.firstName + ' ' + this.state.lastName}>
                </HelloMessage>
                <TextBox label='First Name' update={this.update.bind(this, 'firstName')}>
                </TextBox>
                <TextBox label='Last Name' update={this.update.bind(this, 'lastName')}>
                </TextBox>
            </div>
        );
    }
};

ReactDOM.render(
    <App/>,
    document.getElementById('root')
);